<template>
  <div>
    <!-- v-for指令用来渲染多个内容 -->
    <!-- 口诀:想让谁生成多个,就把v-for写在谁的身上 -->
    <!-- 语法:v-for = "(item,index) in arr",item与index类似形参,命名可以自定义 -->
    <!-- 注意:v-for指令用来渲染多个内容 -->
    <!-- 注意:v-for形参是临时变量,只能用在v-for所在标签本身,以及子标签中,不能超出v-for的范围来使用 -->
    <!-- 注意:不写key,eslint会导致vscode提示语法错误,报红,现阶段需要写上key,使用v-bind -->
    <ul>
      <li v-for="(item, index) in arr" :key="index">
        {{ item }} - {{ index }}
      </li>
      <!-- 如果v-for循环时,可以只有一个参数,类似形参,只有一个参数时,可以省略小括号 -->
      <li v-for="item in arr" :key="item">{{ item }}</li>
    </ul>

    <ul>
      <!-- 目标:使用v-for循环遍历对象 -->
      <!-- z注意:v-for循环遍历对象时,语法:(item,index) in obj 这里面item代表对象的每个值,index代表每个键名-->
      <!-- 第一个参数代表值,第二个参数代表键名 -->
      <li v-for="(item, index) in obj" :key="item">{{ item }} - {{ index }}</li>
    </ul>

    <ul>
      <!-- 目标:循环遍历数字 -->
      <!-- 注意:遍历数字时,效果是从1开始数,数到变量存的数字的值,组成一个数组,再将数组遍历出来 -->
      <!-- 注意:第一个参数为值,第二个参数为下标值 -->
      <li v-for="(item, index) in arrNum" :key="index">
        {{ item }}-{{ index }}
      </li>
    </ul>

    <ul>
      <!-- 目标:v-for遍历循环字符串 -->
      <!-- 效果:将字符串拆分成数组,再将数组循环遍历出来 -->
      <!-- 注意:第一个参数为值,第二个参数为下标值 -->
      <li v-for="(item, index) in str" :key="index">{{ item }}-{{ index }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: ["校长", "小张", "小马", "老马"],
      obj: {
        name: "张",
        age: 18,
      },
      arrNum: 6,
      str: "hello,70",
    };
  },
};
</script>

<style>
</style>